<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Favorites</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            display: none;
            padding-top: 1rem;
        }

        .category {
            padding: 1rem 0;
        }
    </style>
</head>
<body>

<div class="container" id="container">
    <h3>我的收藏</h3>
    <hr>
    <div>
        <button class="btn btn-primary" id="add_category_btn">添加分类</button>
        <button class="btn btn-info" id="add_website_btn">添加网站</button>
    </div>
    <hr>
    <div id="categories"></div>
</div>

<!--登录 modal-->
<div class="modal fade" id="login_modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">登录</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="login_email">邮箱</label>
                    <input type="email" class="form-control" id="login_email" name="login_email" placeholder="请输入邮箱地址">
                </div>
                <div class="form-group">
                    <label for="login_password">密码</label>
                    <input type="password" class="form-control" id="login_password" name="login_password"
                           placeholder="请输入密码">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="login_modal_register_btn">注册</button>
                <button type="button" class="btn btn-primary" id="login_btn">确定</button>
            </div>
        </div>
    </div>
</div>
<!--登录 modal-->

<!--注册 modal-->
<div class="modal fade" id="register_modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">注册</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="register_email">邮箱</label>
                    <input type="email" class="form-control" id="register_email" name="register_email"
                           placeholder="请输入邮箱地址">
                </div>
                <div class="form-group">
                    <label for="verify_code">邮箱验证码</label>
                    <input type="text" class="form-control" id="verify_code" name="verify_code"
                           placeholder="请输入邮箱验证码">
                </div>
                <div class="form-group">
                    <button class="btn btn-primary" id="get_verify_code_btn">获取验证码</button>
                </div>
                <div class="form-group">
                    <label for="register_password">密码</label>
                    <input type="password" class="form-control" id="register_password" name="register_password"
                           placeholder="请输入密码">
                    <small class="form-text text-muted">大小写字母和数字组成，6 - 20 位</small>
                </div>
                <div class="form-group">
                    <label for="register_password2">确认密码</label>
                    <input type="password" class="form-control" id="register_password2" name="register_password2"
                           placeholder="请再次输入密码">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" id="register_modal_login_btn">登录</button>
                <button type="button" class="btn btn-primary" id="register_btn">确定</button>
            </div>
        </div>
    </div>
</div>
<!--注册 modal-->

<!--添加分类 modal-->
<div class="modal fade" id="add_category_modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加分类</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="category_name">名称</label>
                    <input type="text" class="form-control" id="category_name" name="category_name"
                           placeholder="请输入分类名称">
                </div>
                <div class="form-group">
                    <label for="category_sort">排在哪个分类后</label>
                    <select class="form-control" id="category_sort" name="category_sort">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="add_category_ok_btn">确定</button>
            </div>
        </div>
    </div>
</div>
<!--添加分类 modal-->

<!--添加网站 modal-->
<div class="modal fade" id="add_website_modal">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加网站</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="website_category">分类</label>
                    <select class="form-control" id="website_category" name="website_category">
                    </select>
                </div>
                <div class="form-group">
                    <label for="website_name">名称</label>
                    <input type="text" class="form-control" id="website_name" name="website_name"
                           placeholder="请输入网站名称">
                </div>
                <div class="form-group">
                    <label for="website_url">URL</label>
                    <input type="url" class="form-control" id="website_url" name="website_url"
                           placeholder="请输入网站 URL">
                </div>
                <div class="form-group">
                    <label for="website_description">简介</label>
                    <textarea class="form-control" id="website_description" rows="3"></textarea>
                    <small class="form-text text-muted">不能超过 100 个字符</small>
                </div>
                <div class="form-group">
                    <label for="website_sort">排在哪个网站后</label>
                    <select class="form-control" id="website_sort" name="website_sort">
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="add_website_ok_btn">确定</button>
            </div>
        </div>
    </div>
</div>
<!--添加网站 modal-->

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script>
    // API host
    var api_host = 'http://120.77.34.120:8080';
    // API 地址
    var api_urls = {
        // 获取验证码 API 地址
        get_verify_code: api_host + '/auth/verifyCode',
        register: api_host + '/auth/register',
        login: api_host + '/auth/login',
        user: api_host + '/user',
        add_category: api_host + '/category/add',
        add_website: api_host + '/website/add'
    };
    // NOTICE 是否正在请求（去掉）
    // var is_requesting = false;
    // 发起请求的 button
    var request_btn = null;
    // 120 秒间隔
    var countdown_time = 120;
    // 定时器
    var interval = null;
    // 用户收藏
    var user_favorites = null;
    // html 页面文档加载完成后执行
    $(function () {
        /**
         * 设置 ajax 全局参数
         */
        $.ajaxSetup({
            'async': true,
            'crossDomain': true,
            'headers': {
                'content-type': 'application/json'
            },
            'processData': false,
            'beforeSend': function () {
                console.log('ajax: beforeSend');
                // 如果正在请求，取消
//                if (is_requesting) {
//                    console.log('is_requesting');
//                    return false;
//                } else {
//                    mark_is_requesting();
//                    // 锁定发起请求的 btn
//                    request_btn && disabled_btn(request_btn);
//                }
                request_btn && disabled_btn(request_btn);
            },
            // 请求完成后调用，不管 success 还是 error
            'complete': function () {
                console.log('ajax: complete');
                // 重置 is_requesting
//                reset_is_requesting();
                // 解锁发起请求的 btn
                request_btn && enable_btn(request_btn);
                // 重置为 null
                request_btn = null;
            },
            // 请求失败时调用
            'error': function (xhr, textStatus, error) {
                console.log('ajax: error');
                console.log('status: ' + xhr.status);
                console.log('textStatus: ' + textStatus);
                console.log('error: ' + error);
                if (xhr.status === 404) {
                    error_tip('请求 URL 错误');
                }
                // 如果是 status 是 4xx，显示登录 modal
                else if (xhr.status >= 400 && xhr.status < 500) {
                    error_tip('请先登录');
                    close_register_modal();
                    show_login_modal();
                } else if (xhr.status >= 500) {
                    error_tip('抱歉，服务器错误');
                } else {
                    error_tip('发生未知错误');
                }
            }
        });

        // 登录 modal 中的注册按钮
        $('#login_modal_register_btn').on('click', function () {
            // 关闭登录 modal
            close_login_modal();
            // 显示注册 modal
            show_register_modal();
        });
        // 注册 modal 中的登录按钮
        $('#register_modal_login_btn').on('click', function () {
            // 关闭注册 modal
            close_register_modal();
            // 显示登录 modal
            show_login_modal();
        });

        // 登陆 modal
        var $login_modal = $('#login_modal');
        // 注册 modal
        var $register_modal = $('#register_modal');
        // 获取邮箱验证码
        var $get_verify_code_btn = $('#get_verify_code_btn');
        // 点击获取邮箱验证码按钮事件
        $get_verify_code_btn.on('click', on_click_get_verify_code_btn);

        // 登录 input
        var $login_email = $('input[name="login_email"]');
        var $login_password = $('input[name="login_password"]');
        var $login_btn = $('#login_btn');
        // 点击登录按钮
        $login_btn.on('click', on_click_login_btn);
        // 注册 input
        var $register_email = $('input[name="register_email"]');
        var $verify_code = $('input[name="verify_code"]');
        var $register_password = $('input[name="register_password"]');
        var $register_password2 = $('input[name="register_password2"]');
        var $register_btn = $('#register_btn');
        // 点击注册按钮
        $register_btn.on('click', on_click_register_btn);

        // container
        var $container = $('#container');
        // 显示分类的 div
        var $categories = $('#categories');
        // 添加分类按钮
        var $add_category_btn = $('#add_category_btn');
        // 点击添加分类按钮
        $add_category_btn.on('click', on_click_add_category_btn);
        // 添加分类 modal
        var $add_category_modal = $('#add_category_modal');
        // 新分类名称
        var $category_name = $('input[name="category_name"]');
        // 新分类排序
        var $category_sort = $('#category_sort');
        // 确定添加分类按钮
        var $add_category_ok_btn = $('#add_category_ok_btn');
        // 点击确定添加分类按钮
        $add_category_ok_btn.on('click', on_click_add_category_ok_btn);
        // 添加网站按钮
        var $add_website_btn = $('#add_website_btn');
        // 添加网站 modal
        var $add_website_modal = $('#add_website_modal');
        // 点击添加网站按钮
        $add_website_btn.on('click', on_click_add_website_btn);
        // 添加网站确定按钮
        var $add_website_ok_btn = $('#add_website_ok_btn');
        $add_website_ok_btn.on('click', on_click_add_website_ok_btn);
        // 网站字段
        var $website_category = $('#website_category');
        $website_category.on('change', on_website_category_change);
        var $website_name = $('#website_name');
        var $website_url = $('#website_url');
        var $website_description = $('#website_description');
        var $website_sort = $('#website_sort');
        // 新网站分类
        var website_category_id = -1;

        // 读取 token
        var token = get_local_token();
        // 如果 token 不为空
        if (token) {
            // TODO 显示用户信息
            return get_user_favorite(token);
        }

        // 弹出登录 modal
        show_login_modal();

        // 从 local storage 获取 token
        function get_local_token() {
            return localStorage.getItem('token');
        }

        // 更新 local storage 的 token
        function update_local_token(token) {
            // 删除原来的
            localStorage.removeItem('token');
            localStorage.setItem('token', token);
        }

        // 获取用户收藏
        function get_user_favorite(token) {
            // 调用 API
            $.ajax({
                'url': api_urls.user,
                'method': 'GET',
                // 用户认证 token
                'headers': {
                    'Authorization': 'Bearer ' + token
                }
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // 输出收藏
                    render_favorite(response.categories);
                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 输出用户收藏
        function render_favorite(categories) {
            console.log(categories);

            // 保存用户收藏，用于添加分类或是网站时使用
            user_favorites = categories;

            // 分类
            render_categories(categories);

            // 下拉框
            add_categories_to_select(categories);
            add_categories_to_select2(categories);

            // 显示我的收藏
            $container.show();
        }

        // 输出分类
        function render_categories(categories) {
            var div = '';
            for (var i = 0; i < categories.length; i++) {
                var category = categories[i];
                div += '<div class="category" data-cid="' + category.id + '">';
                div += '<h4>' + category.name + '</h4>';

                // 分类下的网站
                var websites = category.websites;
                // 排序
                websites = websites.sort(function (a, b) {
                    return a.sort - b.sort;
                });
                for (var j = 0; j < websites.length; j++) {
                    div += '<p><a href="' + websites[j].url + '">' + websites[j].name + '</a></p>';
                }

                div += '</div>';
            }

            $categories.html(div);
        }


        // 显示登录 modal
        function show_login_modal() {
            $login_modal.modal({
                'backdrop': 'static'
            });
        }

        // 关闭登录 modal
        function close_login_modal() {
            $login_modal.modal('hide');
        }

        // 显示注册 modal
        function show_register_modal() {
            $register_modal.modal({
                'backdrop': 'static'
            });
        }

        // 关闭注册 modal
        function close_register_modal() {
            $register_modal.modal('hide');
        }

        // 错误提示
        function error_tip(msg) {
            console.log(msg);
            alert(msg);
        }

        // 点击获取邮箱验证码时
        function on_click_get_verify_code_btn() {
            // 注册邮箱
            var email = get_register_email();
            if (!email) {
                return;
            }

            // 发起请求的 btn
            request_btn = $(this);

            // 调用 API
            $.ajax({
                'url': api_urls.get_verify_code,
                'method': 'POST',
                'data': JSON.stringify({
                    email: email
                })
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // 开始倒计时 120
                    verify_code_countdown();
                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 获取注册邮箱
        function get_register_email() {
            var email = $register_email.val();
            // 去掉前后空格
            email = email.trim();
            // 是否为空
            if (email.length === 0) {
                error_tip('请输入邮箱地址');
                return false;
            }
            if (!is_email(email)) {
                error_tip('邮箱格式错误');
                return false;
            }
            return email;
        }

        // 标记正在请求
//        function mark_is_requesting() {
//            is_requesting = true;
//        }

        // 标记不是正在请求
//        function reset_is_requesting() {
//            is_requesting = false;
//        }

        // 判断请求是否成功
        function is_success(data) {
            return data.code === 0;
        }

        // 获取错误 message
        function get_error_message(data) {
            return data.message || '未知错误';
        }

        // 设置 button 的 disabled => true
        function disabled_btn(btn) {
            btn.prop('disabled', true);
        }

        // 设置 button 的 disabled => false
        function enable_btn(btn) {
            btn.prop('disabled', false);
        }

        // 发送邮箱验证码 120 秒倒计时
        function verify_code_countdown() {
            console.log('verify_code_countdown');

            // 锁定 btn
            disabled_btn($get_verify_code_btn);

            // 开始定时器
            interval = setInterval(function () {
                if (countdown_time < 1) {
                    // 解锁 btn
                    enable_btn($get_verify_code_btn);

                    $get_verify_code_btn.html('获取验证码');
                    clearInterval(interval);
                    return;
                }
                $get_verify_code_btn.html((countdown_time--) + ' 秒后重发');
            }, 1000);
        }

        // 点击注册
        function on_click_register_btn() {
            // 注册邮箱
            var email = get_register_email();
            if (!email) {
                return;
            }

            // 验证码
            var verify_code = get_verify_code();
            if (!verify_code) {
                return;
            }

            // 密码
            var password = get_register_password();
            if (!password) {
                return;
            }

            // 发起请求的 btn
            request_btn = $(this);

            // 调用 API
            $.ajax({
                'url': api_urls.register,
                'method': 'POST',
                'data': JSON.stringify({
                    email: email,
                    password: password,
                    verifyCode: verify_code
                })
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // TODO 注册成功
                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 获取验证码
        function get_verify_code() {
            var verify_code = $verify_code.val();
            // 去掉前后空格
            verify_code = verify_code.trim();
            // 是否为空
            if (verify_code.length === 0) {
                error_tip('请输入验证码');
                return false;
            }
            return verify_code;
        }

        // 获取注册输入的密码
        function get_register_password() {
            var password = $register_password.val();
            password = password.trim();
            // 是否为空
            if (password.length === 0) {
                error_tip('请输入密码');
                return false;
            }

            // 格式是否正确
            var reg = /^[a-zA-Z0-9]{6,20}$/;
            if (!reg.test(password)) {
                error_tip('密码格式错误');
                return false;
            }

            // 两次密码是否一致
            if (password !== $register_password2.val()) {
                error_tip('两次密码不一致');
                return false;
            }

            return password;
        }

        // 点击登录
        function on_click_login_btn() {
            // 邮箱
            var email = get_login_email();
            if (!email) {
                return;
            }

            // 密码
            var password = get_login_password();
            if (!password) {
                return;
            }

            // 发起请求的 btn
            request_btn = $(this);

            // 调用 API
            $.ajax({
                'url': api_urls.login,
                'method': 'POST',
                'data': JSON.stringify({
                    email: email,
                    password: password
                })
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // NOTICE 因为 alert 后又延迟，这里先释放掉 is_requesting
//                    reset_is_requesting();

                    login_success(response);
                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 获取登录邮箱
        function get_login_email() {
            var email = $login_email.val();
            // 去掉前后空格
            email = email.trim();
            // 是否为空
            if (email.length === 0) {
                error_tip('请输入邮箱地址');
                return false;
            }
            if (!is_email(email)) {
                error_tip('邮箱格式错误');
                return false;
            }
            return email;
        }

        // TODO 判断是否是正确的邮箱格式
        function is_email(email) {
            console.log(email);
            return true;
        }

        // 获取登录密码
        function get_login_password() {
            var password = $login_password.val();
            password = password.trim();
            // 是否为空
            if (password.length === 0) {
                error_tip('请输入密码');
                return false;
            }
            return password;
        }

        // 获取服务器返回的 token
        function get_response_token(response) {
            if (typeof response.token === 'undefined') {
                console.log('response.token undefined');
                return '';
            }
            return response.token;
        }

        // 登陆成功
        function login_success(response) {
            var token = get_response_token(response);
            if (!token) {
                error_tip('获取 token 失败');
                return;
            }

            // 保存 token 到 local storage
            update_local_token(token);

            // 关闭登录 modal
            close_login_modal();

            // TODO 显示用户信息

            // 获取用户收藏并显示到网页
            get_user_favorite(token);
        }

        // 点击添加分类按钮
        function on_click_add_category_btn() {
            show_add_category_modal();
        }

        // 显示添加分类 modal
        function show_add_category_modal() {
            $add_category_modal.modal({
                'backdrop': 'static'
            });
        }

        // 关闭添加分类 modal
        function close_add_category_modal() {
            $add_category_modal.modal('hide');
        }

        // 点击确定添加分类按钮
        function on_click_add_category_ok_btn() {
            // 名称
            var name = get_category_name();
            if (!name) {
                return;
            }

            // 排序
            var after = get_category_sort();
            // 是否是第一位
            var first = false;
            if (after === true) {
                first = true;
                after = -1;
            }

            // token
            var token = get_local_token();
            if (!token) {
                error_tip('获取 token 失败');
                return;
            }

            // 发起请求的 btn
            request_btn = $(this);

            // 调用 API
            $.ajax({
                'url': api_urls.add_category,
                'method': 'POST',
                'data': JSON.stringify({
                    name: name,
                    first: first,
                    after: after
                }),
                // 用户认证 token
                'headers': {
                    'Authorization': 'Bearer ' + token
                }
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // 关闭 modal
                    close_add_category_modal();

                    // 清空掉 category_name
                    $category_name.val('');

                    // 重新请求一次获取用户收藏：
                    // 1、更新 user_favorites
                    // 2、显示到页面
                    // 3、更新两个 select
                    get_user_favorite(token);

                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 获取新分类名称
        function get_category_name() {
            var name = $category_name.val();
            name = name.trim();
            if (name.length === 0) {
                error_tip('请输入分类名称');
                return false;
            }
            // 不能超过 20 个字符
            if (name.length > 20) {
                error_tip('分类名称不能超过 20 个字符');
                return false;
            }

            return name;
        }

        // 获取新分类排序
        function get_category_sort() {
            var sort = $category_sort.val();
            // 解析成 int
            sort = parseInt(sort);
            // 解析失败，当作排在第一位
            if (isNaN(sort)) {
                return true;
            }

            // 是否排在第一位
            if (sort < 0) {
                return true;
            }

            return sort;
        }

        // 添加分类到 add_category_modal 的下拉选项
        function add_categories_to_select(categories) {
            var options = '<option value="-1" selected>排在第一位</option>';
            for (var i = 0; i < categories.length; i++) {
                options += '<option value="' + categories[i].id + '">' + categories[i].name + '</option>';
            }
            $category_sort.html(options);
        }

        // 添加分类到 add_website_modal
        function add_categories_to_select2(categories) {
            var options = '<option value="-1" selected>选择分类</option>';
            for (var i = 0; i < categories.length; i++) {
                options += '<option value="' + categories[i].id + '">' + categories[i].name + '</option>';
            }
            $website_category.html(options);
        }

        // 点击添加网站按钮
        function on_click_add_website_btn() {
            show_add_website_modal();
        }

        // 显示添加网站 modal
        function show_add_website_modal() {
            $add_website_modal.modal({
                'backdrop': 'static'
            });
        }

        // 关闭添加网站 modal
        function close_add_website_modal() {
            $add_website_modal.modal('hide');
        }

        // 点击添加网站确定按钮
        function on_click_add_website_ok_btn() {
            // 分类
            if (website_category_id < 1) {
                error_tip('请选择网站分类');
                return;
            }

            // 名称
            var name = get_website_name();
            if (!name) {
                return;
            }

            // url
            var url = get_website_url();
            if (!url) {
                return;
            }

            // description
            var description = get_website_description();
            if (!description) {
                return;
            }

            // 排序
            var after = get_website_sort();
            // 是否是第一位
            var first = false;
            if (after === true) {
                first = true;
                after = -1;
            }

            // token
            var token = get_local_token();
            if (!token) {
                error_tip('获取 token 失败');
                return;
            }

            // 发起请求的 btn
            request_btn = $(this);

            // 调用 API
            $.ajax({
                'url': api_urls.add_website,
                'method': 'POST',
                'data': JSON.stringify({
                    name: name,
                    url: url,
                    description: description,
                    categoryId: website_category_id,
                    first: first,
                    after: after
                }),
                // 用户认证 token
                'headers': {
                    'Authorization': 'Bearer ' + token
                }
            }).done(function (response) {
                console.log(response);
                if (is_success(response)) {
                    // 关闭 modal
                    close_add_website_modal();

                    // 清空 modal 的 input
                    $website_name.val('');
                    $website_url.val('');
                    $website_description.val('');

                    // 重新请求一次获取用户收藏：
                    // 1、更新 user_favorites
                    // 2、显示到页面
                    // 3、更新两个 select
                    get_user_favorite(token);

                    return;
                }

                // 失败
                error_tip(get_error_message(response));
            });
        }

        // 新网站名称
        function get_website_name() {
            var name = $website_name.val();
            name = name.trim();
            if (name.length === 0) {
                error_tip('请输入网站名称');
                return false;
            }
            // 不能超过 20 个字符
            if (name.length > 20) {
                error_tip('网站名称不能超过 20 个字符');
                return false;
            }
            return name;
        }

        // 新网站 URL
        function get_website_url() {
            var url = $website_url.val();
            url = url.trim();
            if (url.length === 0) {
                error_tip('请输入网站URL');
                return false;
            }
            // 不能超过 255 个字符
            if (url.length > 255) {
                error_tip('网站URL不能超过 255 个字符');
                return false;
            }
            // TODO 判断是否是有效的 URL
            return url;
        }

        // 新网站简介
        function get_website_description() {
            var description = $website_description.val();
            description = description.trim();
            if (description.length === 0) {
                error_tip('请输入网站简介');
                return false;
            }
            // 不能超过 100 个字符
            if (description.length > 100) {
                error_tip('网站简介不能超过 100 个字符');
                return false;
            }
            return description;
        }

        // 网站排序
        function get_website_sort() {
            var sort = $website_sort.val();
            // 解析成 int
            sort = parseInt(sort);
            // 解析失败，当作排在第一位
            if (isNaN(sort)) {
                return true;
            }

            // 是否排在第一位
            if (sort < 0) {
                return true;
            }

            return sort;
        }

        // 当网站分类改变时
        function on_website_category_change() {
            var id = $website_category.val();
            id = parseInt(id);
            if (!isNaN(id)) {
                website_category_id = id;
            }

            var category = find_category(id);
            // 重新输出网站排序的 options
            if (category) {
                render_category_websites(category.websites);
            }
        }

        // 查找 category
        function find_category(id) {
            for (var i = 0; i < user_favorites.length; i++) {
                if (user_favorites[i].id === id) {
                    return user_favorites[i];
                }
            }
            return false;
        }

        // 输出分类下的网站到 select
        function render_category_websites(websites) {
            // 排序
            websites = websites.sort(function (a, b) {
                return a.sort - b.sort;
            });
            var options = '<option value="-1" selected>排在第一位</option>';
            for (var i = 0; i < websites.length; i++) {
                options += '<option value="' + websites[i].id + '">' + websites[i].name + '</option>';
            }
            $website_sort.html(options);
        }
    });
</script>
</body>
</html>
